The Box Model

The Box Model

The CSS box model is essentially a box that wraps around every HTML element. It consists of margin, border, padding, and the actual content.

• CSS Box Model - w3schools (opens new window)
• The Box Model - MDN (opens new window)
• Video: The Box Model in Devtools (opens new window)
• Video: The Box Model History - Wikipedia (opens new window)

inline Elements ignore other inlineElements vertical padding

Margin collapse (opens new window): Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

• what-you-should-know-about-collapsing-margins (opens new window)

---

box-sizing

How the total size of the box is calculated:

box-sizing: content-box

• the default setting
• width/height doesn't include margin, border & padding
• width (height) = width(height) + padding + border

box-sizing: border-box.

• include the padding and border in an element's total width and height.
• Recommended (include in CSS reset)

Links - Box-sizing

• Box sizing - w3schools (opens new window)

• Box-Sizing - MDN (opens new window)

• Paul Irish - Box Sizing (opens new window)

• Box sizing best practice - CSS Tricks (opens new window)

  html {
  box-sizing: border-box;
  }
  *,
  *:before,
  *:after {
  box-sizing: inherit;
  }